<template>
    <div class="data-info" v-loading="loading">
        <div class="condition" v-auth:sdfasdfas>
            <div class="item">
                <span>状态：</span>
                <el-select v-model="params.status" style="width:80px">
                    <el-option value="all" label="全部"/>
                    <el-option value="yes" label="正常"/>
                    <el-option value="no" label="禁用"/>
                </el-select>
            </div>
            <div class="item">
                <span>注册时间：</span>
                <date-picker :start.sync="params.start_time" :end.sync="params.end_time" @change="search"/>
            </div>
            <el-button @click="searchBtn" type="primary">查询</el-button>
        </div>
        <el-table :data="data">
            <el-table-column prop="mobile" label="手机号码"/>
            <el-table-column prop="nick_name" label="昵称"/>
            <el-table-column label="禁用">
                <template slot-scope="{row}">
                    <span class="red" v-if="row.status == 1">是</span>
                    <span class="success" v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="注册时间"/>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <a class="green" v-if="row.status == 1" @click="status(row.id, 0)">启用</a>
                    <a class="red" v-else @click="status(row.id, 1)">禁用</a>
                </template>
            </el-table-column>
        </el-table>
        <page :total="total" :current.sync="params.page" :size.sync="params.size" @change="search"/>
    </div>
</template>

<script>
    import {userDisable, userLists} from "@/api";
    import DatePicker from "@/components/date/picker";
    import Page from "@/components/page/index";

    export default {
        components: {Page, DatePicker},
        data() {
            return {
                params: {
                    page: 1,
                    size: 10,
                    status: 'all',
                    start_time: '',
                    end_time: '',
                },
                loading: false,
                data: [],
                total: 0
            }
        }
        , created() {
            this.search();
        }
        , methods: {
            search() {
                this.loading = true;
                userLists(this.params, (res) => {
                    this.loading = false;
                    this.data = res.lists;
                    this.total = res.total;
                })
            }
            // 搜索
            , searchBtn() {
                this.params.page = 1;
                this.search();
            }
            , status(uid, val) {
                let content = '';
                if (val == 0) {
                    content = "确定恢复该用户账号？";
                } else {
                    content = "确定禁用该用户账号？";
                }
                this.$confirm(content, () => {
                    this.loading = true;
                    userDisable({uid: uid, status: val}, () => {
                        this.search();
                    }, () => {
                        this.loading = false;
                    })
                })
            }
        }
    }
</script>
